<template lang="">
  <div align="center">
      展示分类
      <table>
          <tr>
              <td v-for="i in catelist">
                  <van-button @click="changetype(i.id)" :class="i.id==typeid?'active':''">{{i.name}}</van-button>
              </td>
          </tr>
      </table>
      展示记录
      <table border="1" cellspacing="0">
          <tr>
              <td>ID</td>
              <td>购买时间</td>
              <td>到期时间</td>
              <td>所剩金额</td>
              <td>跳转详情</td>
          </tr>
          <tr v-for="i in recordlist">
              <td>{{i.id}}</td>
              <td>{{i.stime}}</td>
              <td>{{i.etime}}</td>
              <td :class="i.money<=10?'add':''">￥{{i.money}}</td>
              <td><router-link :to="{path:'/detail',query:{'id':i.id}}">详情</router-link></td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
    data(){
        return{
            catelist:[],
            recordlist:[],
            typeid:0
        }
    },
    methods:{
        getcatelist(){
            this.axios.get('cateM').then(res=>{
                this.catelist = res.data.list
            })
        },
        getrescorlist(){
            this.axios.get('recordM?typeid='+this.typeid).then(res=>{
                this.recordlist = res.data.list
            })
        },
        //改变分类
        changetype(typeid){
            this.typeid = typeid
            this.getrescorlist()
        }
    },
    mounted(){
        this.getcatelist()
        this.getrescorlist()
    }
}
</script>

<style>
.active{
    background-color: coral;
}
.add{
    -webkit-text-fill-color: red;
}
</style>